<template>
	<view>
		<cu-custom :isBack="true">
			<block #content>
				登录日志
			</block>
		</cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="getLogininforList" :top="'180rpx'" style="position:relative;z-index:1;width:100%;">
			<view class="margin-lr">
				<view v-for="(arrItem,arrIndex) in logininforList" :key="arrIndex">
					<view v-for="(item,index) in arrItem" :key="index">
						<view class="flex justify-start padding-tb-sm"
							style="border-bottom: 1px solid rgba(0, 0, 0, .1);">
							<view class="cuIcon-people lg" :style="[{color:themeConfig.primaryColor}]"
								style="width: 50px;height: 50px;line-height: 50px;font-size: 30px;"></view>
							<view class="flex-sub">
								<view class="flex justify-between">
									<view>{{item.userName}}</view>
									<view class="text-gray text-sm">{{item.loginTime}}</view>
								</view>
								<view class="flex justify-between text-sm text-gray margin-top-xs">
									<view class="">
										{{item.loginLocation}} ({{item.ipaddr}})
									</view>
									<view :style="[{color:themeConfig.primaryColor}]">
										{{item.msg}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as monitorApi from '@/api/dmIot/monitorApi.ts'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins';
	export default {
		name: "operlogInfo",
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					use: true,
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false,
					empty: {
						use: true,
						fixed: true,
						top: '20%'
					},
				},
				logininforList: [],
				currentPage: 1,
				pageSize: 20,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.getLogininforList()
		},
		methods: {
			downCallback() {
				this.currentPage = 1
				this.logininforList = []
				this.mescroll.resetUpScroll()
			},
			getLogininforList() {
				let currentPage = this.currentPage
				let pageSize = this.pageSize
				let params = {
					pageNum: currentPage,
					pageSize
				}
				monitorApi.getLogininforList(params).then((res) => {
					const {
						rows,
						total,
						success
					} = res
					if (success) {
						this.mescroll.endByPage(rows.length, total)
						const index = currentPage - 1
						this.$set(this.logininforList, index, rows)
						this.currentPage = currentPage + 1
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>
